<template>
  <div>
    <div class="client-main">
      <div class="receipt-main">
        <el-row :gutter="10" class="mb8">
          <el-col :span="24">
            <!-- 查询表单 -->
            <el-form :inline="true" :model="queryParams" ref="queryForm" size="small" label-width="0"
                     class="demo-form-inline" style="height: 40px;float: right;">
              <el-form-item prop="no">
                <el-input
                  v-model="queryParams.no"
                  placeholder="付款单号"
                  clearable
                />
              </el-form-item>
<!--              <el-form-item style="width: 100px;" prop="status">-->
              <!--                <el-select-->
              <!--                  v-model="queryParams.status"-->
              <!--                  placeholder="单据状态"-->
              <!--                  clearable-->
              <!--                >-->
              <!--                  <el-option v-for="item in dict.advice_payment_status"-->
              <!--                             :key="item.dictValue"-->
              <!--                             :label="item.dictLabel"-->
              <!--                             :value="item.dictValue"-->
              <!--                  />-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
              <el-form-item>
                <el-date-picker
                  v-model="paymentTime"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="付款日期开始"
                  end-placeholder="付款日期结束">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="success" size="mini" :icon="queryParams.params.searchQuery?'el-icon-loading':''"
                           @click="$refs.queryRef.show()">高级查询
                </el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-card shadow="never">
          <el-empty description="暂无数据" v-if="listData.length < 1"></el-empty>
          <div v-infinite-scroll="loadData" infinite-scroll-disabled="busy" infinite-scroll-distance="10"
               style="overflow:auto;height: 24rem;">
            <div class="container zuofei"
                 v-for="(item,index) in listData"
                 :key="index"
                 :id="item.no"
            >
              <table>
                <caption style="height: 30px;color: #303133;">
                  <h2>{{item.communityName}}付款单</h2>
                  <div>
                    <div style="border-bottom: 1px solid #303133; width:300px; margin-bottom: 2px;"></div>
                    <div style="border-bottom: 1px solid #303133; width:300px;"></div>
                  </div>
                </caption>
                <tbody>
                <tr style="height:50px;">
                  <td valign="center" rowspan="1" colspan="1" style="text-align:left;border:none;">
                    <el-checkbox @change="(v)=>selectNo(v,item,index)">单号：{{item.no}}</el-checkbox>
                  </td>
                  <td valign="center" rowspan="1" colspan="2" style="text-align:center;border:none;">
                    付款日期：{{item.paymentTime}}
                  </td>
                  <td valign="center" rowspan="1" colspan="2" style="text-align:right;border:none;">
                    付款人：{{item.paymentUserName}}
                  </td>
                </tr>
                <tr style="height:30px;">
                  <td valign="center" rowspan="1" colspan="2" class="td-border" style="text-align:left;">
                    房间名称：{{item.roomName}}
                  </td>
                  <td valign="center" rowspan="1" colspan="4" class="td-border" style="text-align:left;">
                    客户名称：{{item.customName}}
                  </td>
                </tr>
                <tr>
                  <td valign="center" class="td-border">应付年月</td>
                  <td valign="center" class="td-border">付款项目</td>
                  <td valign="center" class="td-border" style="width: 15%;">付款金额</td>
                  <td valign="center" class="td-border" style="width: 15%;">转存金额</td>
                  <td valign="center" class="td-border" style="width: 15%;">应付说明</td>
                  <td valign="center" class="td-border" style="width: 15%;">扣款说明</td>
                </tr>
                <template v-for="(detail,dlIndex) in item.advicePaymentDetails">
                  <tr :key="dlIndex">
                    <td valign="center" class="td-border">{{detail.copeYearMonth}}</td>
                    <td valign="center" class="td-border">{{detail.paymentItemsName}}</td>
                    <td valign="center" class="td-border">{{detail.paymentMoney}}</td>
                    <td valign="center" class="td-border">{{detail.transferAmount}}</td>
                    <td valign="center" class="td-border">{{detail.copeRemark}}</td>
                    <td valign="center" class="td-border">{{detail.noteRemark}}</td>
                  </tr>
                </template>
                <tr>
                  <td valign="center" class="td-border">合计</td>
                  <td valign="center" class="td-border">{{item.paymentMoney|digitUppercase}}</td>
                  <td valign="center" class="td-border">{{item.paymentMoney}}</td>
                  <td valign="center" class="td-border">{{item.transferAmount}}</td>
                  <td valign="center" class="td-border"></td>
                  <td valign="center" class="td-border"></td>
                </tr>
                <tr>
                  <td colspan="9" align="left">
                    <div class="fr">
                          <span class="mr20">
                            付款方式：
                            <template v-for="(mode,modeIndex) in item.modePayments">
                            {{dict.label.payment_method[mode.paymentType]}}[{{mode.paymentMoney}}]{{modeIndex != (item.modePayments.length-1)?',':'' }}
                            </template>
                          </span>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
              <!--<img src="@/assets/images/printTemplate/yishoukuan.png" v-if="item.auditStatus=='10001'" class="zuofei" >-->
              <!--<img src="@/assets/images/printTemplate/yishenhe.png" v-if="item.auditStatus=='10002'" class="zuofei" >-->
              <!--<img src="@/assets/images/printTemplate/zuofei.png" v-if="item.auditStatus=='10003'" class="zuofei" >-->
            </div>
          </div>
        </el-card>

      </div>
    </div>
    <div class="operate-but" v-if="listData.length > 1">
      <!--<el-button type="primary" plain size="mini" :disabled="multiple" @click="deleteAdvice">删除单据</el-button>-->
      <el-button type="primary" plain size="mini" v-print="printObj">补打单据</el-button>
    </div>


    <l-super-query ref="queryRef" keyName="PayDemand" :columns="queryColumns" @searchQuery="searchQuery"
                   @resetting="queryParams.params.searchQuery=null"/>
  </div>
</template>

<script>

  import { listAdvicePayment , delAdvicePayment } from "@/api/payfee/advicePayment";

  export default {
    dicts: ['advice_payment_status','payment_method'],
    data() {
      return {
        currentNode: {},
        //付款单明细
        listData: [],
        noFlag: false,
        busy: false,
        paymentTime: [], //付款日期
        queryParams: {
          roomId: null,
          pageNum: 1,
          pageSize: 2,
          no: null,
          status: null,
          params: {}
        },
        selections: [],
        ids: [],
        single: false,//单选
        multiple: false, //多选
        queryColumns: [
          {title: '付款单号', key: 'no', typeCode: '', type: 'input', value: ''},
          {title: '付款人', key: 'payment_user_name', typeCode: '', type: 'input', value: ''},
          // {title:'房屋编号',key:'roomId',type:'room',value:''},
        ]
      }
    },
    created() {
      this.selections = []
    },
    methods: {
      show(option) {
        this.listData = []
        this.currentNode = option.currentNode
        this.handleQuery()
        this.selections = []
      },
      loadData() {
        if (!this.noFlag) {
          this.getList();
        } else {
          // this.msgError("没有更多数据了...")
        }
      },
      /** 查询收费单列表 */
      getList(queryFlag) {
        if (!this.currentNode.id) return;
        this.busy = true;
        this.queryParams.roomId = this.currentNode.id
        let queryParams = this.addDateRange(this.queryParams, this.paymentTime, "paymentTime")
        listAdvicePayment(queryParams).then(response => {
          let searchList = response.rows;
          if (searchList.length > 0) {
            if (this.queryParams.pageNum == 1) {
              this.listData = searchList;
            } else {
              this.listData = this.listData.concat(searchList);//上拉拉把数据显示在最下方
            }
            //当前页数*每页多少行
            let currentNum = this.queryParams.pageNum * this.queryParams.pageSize
            if (currentNum >= response.total) {
              this.noFlag = true
            } else {
              this.noFlag = false
              this.queryParams.pageNum++
            }
          } else {
            if (queryFlag) {
              this.listData = []
            } else {
              this.msgError("没有更多数据了...")
              this.noFlag = true
            }
          }
          this.busy = false;
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.paymentTime = []
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.noFlag = false
        this.queryParams.pageNum = 1;
        this.getList(true);
      },
      selectNo(FLAG, row, index) {
        let index_1 = this.selections.findIndex(x => x.id == row.id)
        if (FLAG) {
          if (index_1 == -1) {
            this.selections.push(this.listData[index])
          }
        } else {
          if (index_1 != -1) {
            this.selections.splice(index_1, 1)
          }
        }
        this.receiptNos = this.selections.map(item => item.no)
        this.ids = this.selections.map(item => item.id)
        this.single = this.selections.length !== 1
        this.multiple = !this.selections.length
      },
      searchQuery(queryParams) {
        this.queryParams.params['searchQuery'] = queryParams
        this.getList(true)
      },
      deleteAdvice(){
        const ids = this.ids;
        const titles = this.titles;
        this.$confirm('是否确认删除付款记录单号为"' + this.receiptNos + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delAdvicePayment(ids);
        }).then(() => {
          this.handleQuery();
          this.msgSuccess("删除成功");
        }).catch(() => {
        });
      }
    }

  };
</script>

<style scoped lang="scss">
  .container {
    position: relative;
    margin: 10px;
    /*box-shadow: 0px 0px 10px rgba(#000000, 0.5);*/
    border: 2px solid #cccccc;
    border-radius: 5px;
    padding: 10px;

    h2 {
      text-align: center;
      margin-bottom: 5px;
      margin-top: 0;
    }

    .title {
      font-size: 14px;

      span {
        margin-right: 20px;
      }
    }

    table {
      width: 100%;
      text-align: center;
      /* 表边框合并  两个单元格之间的边框进行合并 */
      border-collapse: collapse;
      margin: 0 auto;
      color: #868686;
    }

    table td,
    th {
      font-size: 12px;
      border: 1px #868686 solid;
      // background-color: white;
      // width: 100px;
      // height: 40px;
      line-height: 30px;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .flag {
      position: absolute;
      right: 30px;
      top: 0;
    }

    .zuofei {
      position: absolute;
      bottom: 10px;
      right: 300px;
      width: 110px;
      z-index: 10;
    }
  }

  .operate-but {
    text-align: center;
    margin-top: 20px;
  }

  .td-border {
    word-break: break-all;
    border-width: 1px;
    border-style: solid;
  }
</style>
